<!--
 * @Descripttion: 文章列表信息
 * @version: v1.0.0.0
 * @Author: 任飞
 * @Date: 2020-03-27 14:39:01
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-05-20 13:35:26
 -->
<template>
  <div class="app-container">
    <div v-if="!editShow">
      <!-- 111 -->
      <eHeader :query="articleRow" />
      <!-- 111 -->
      <el-table :data="data" border style="width: 100%">
        <!-- <el-table-column prop="id" label="文章ID" width="180" /> -->
        <el-table-column prop="title" label="文章标题" />
        <el-table-column label="封面">
          <template slot-scope="scope">
            <img :src="scope.row.cover_path" style="max-width:100px;max-height:70px;">
          </template>
        </el-table-column>
        <el-table-column prop="description" label="文章描述" />
        <el-table-column prop="type" label="文章类型" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="source" label="来源" />
        <el-table-column label="素材">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_material" active-color="#13ce66" inactive-color="#ff4949" active-value="1" inactive-value="0"  active-text="上线" inactive-text="下线" @change="changeToMaterial(scope.row.id, scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!-- <edit :data="scope.row" :sup_this="sup_this" /> -->
            <el-button size="mini" type="success" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-popconfirm title="确定删除本条数据吗？" @onConfirm="handleDelete(scope.row.id)">
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
            <!-- <el-button type="primary" size="mini" plain @click="toMaterial(scope.row.id)"> 加入素材 </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      
      <!--分页组件-->
      <el-pagination
        :total="total"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>
    <editForm v-else :article-row="articleRow" />
  </div>
</template>
<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import eHeader from './module/header'
import editForm from './module/editForm'

export default {
  components: {
    eHeader, editForm
  },
  mixins: [initData],
  data() {
    return {
      query: [],
      sup_this: this,
      editShow: false,
      articleRow: {},
      delLoading: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    checkPermission,
    beforeInit() {
      this.url = '/admin/v1/article'
      const sort = 'id,desc'
      this.params = { page: this.page, limit: this.limit, sort: sort }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) { this.params[type] = value }
      return true
    },
    handleEdit(id) {
      this.$api.material.article
        .getDetail(id)
        .then(res => {
          this.articleRow = res.data
          this.editShow = true
        }).catch(err => {
          console.log(err)
        })
    },
    handleDelete(id) {
      this.delLoading = true
      this.$api.material.article
        .del(id)
        .then(res => {
          this.delLoading = false
          this.init()
          this.$notify({ title: '删除成功', type: 'success', duration: 2500 })
        }).catch(err => {
          this.delLoading = false
          console.log(err.response.data.message)
        })
    },
    handleChange(e) {
      console.log(e)
    },
    changeToMaterial(id, index) {
      this.$confirm('确定上线到素材?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.material.material
          .articleToMaterial(id)
          .then(res => {
            this.$notify({ title: '素材处理成功', type: 'success', duration: 2500 })
          })
          .catch(err => {
            console.log(err)
          })
      }).catch(res => {
        this.data[index].is_material = !this.data[index].is_material
        this.$message({ type: 'info', message: '已取消上线到素材' })
      })
    },
    // toMaterial(id) {
    //   this.$api.material.material
    //     .articleToMaterial(id)
    //     .then(res => {
    //       this.$notify({ title: '加入到素材成功', type: 'success', duration: 2500 })
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })
    // }
  }
}
</script>
<style lang='less' scoped>
</style>